<script lang='ts' setup name='App'>
import { ref,reactive, watch, watchEffect } from 'vue';

import Child from './Child.vue'

const div1 = ref()
const child = ref()

  function getDom(){
    // const div = document.getElementById('app');
    // div.style.backgroundColor = 'grey'

    // console.log(div1) 
    //.value 是原生的dom对象
    div1.value.style.backgroundColor = 'grey'
   
    // div1.style.backgroundColor = 'grey'

  }



  function getChildRef(){
    
    console.log(
      '%c child: ',
      'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
      child 
    )

    //child虽然拿到了 子组件对象  
  }
   

  
</script>  
  
<template>  

 
    <div  ref="div1" > 班级名称 : java android 1班</div>

    <button @click="getDom">获取原生dom对象</button>



    <Child ref="child"></Child>
    <button @click="getChildRef">获取child的对象</button>


</template>




  
<style scoped> </style>  



